<template>
	<view class="content">
		<uni-forms ref="formRef" :modelValue="formData" :rules="formRule" label-position="top">
			<uni-forms-item label="收货人" name="recipient" required>
				<uni-easyinput placeholder="请输入姓名" v-model="formData.recipient" />
			</uni-forms-item>
			<uni-forms-item label="手机号" name="phone" required>
				<uni-easyinput placeholder="请输入手机号" type="number" v-model="formData.phone" />
			</uni-forms-item>
			<uni-forms-item label="所在地区" name="city" required>
				<uni-data-picker placeholder="请选择" popup-title="请选择所在地区" :localdata="cities"
					v-model="formData.city"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="详细地址" name="details_address" required>
				<uni-easyinput type="textarea" v-model="formData.details_address" placeholder="请输入详细地址" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="handleSave">保存地址</button>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue"
	import cities from "../../assets/cities.json"
	import {
		useUserStore
	} from "@/stores/user.js"
	import {
		SERVER_URL
	} from "@/config/index.js"
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const userStore = useUserStore()

	const state = reactive({
		id: null
	})



	const formRef = ref()

	const formRule = ref({
		recipient: {
			rules: [{
					required: true,
					errorMessage: '请输入收货人',
				},
				{
					minLength: 1,
					maxLength: 10,
					errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
		phone: {
			rules: [{
				required: true,
				format: 'phone',
				errorMessage: '请输入手机号',
			}]
		},
		city: {
			rules: [{
				required: true,
				errorMessage: '请选择地区',
			}]
		},
		details_address: {
			rules: [{
				required: true,
				errorMessage: '请输入详细地址',
			}]
		}
	})

	const formData = ref({
		recipient: undefined,
		phone: undefined,
		province: undefined,
		city: undefined,
		district: undefined,
		details_address: undefined,
	})

	const loadData = () => {
		uni.showLoading()
		uni.request({
			url: SERVER_URL + '/customer/shipping-address/detail/' + state.id,
			method: "GET",
			header: {
				"authorization": userStore.token
			},
			success: (res) => {
				console.log(res);
				formData.value = {
					recipient: res.data.recipient,
					phone: res.data.phone,
					city: [res.data.province, res.data.city, res.data.district].join("-"),
					details_address: res.data.details_address,
				}
			},
			complete: () => {
				uni.hideLoading()
			}
		});
	}

	onLoad((e) => {
		console.log(e)
		state.id = e.id ?? null
		if (e.id) {
			uni.setNavigationBarTitle({
				title: "编辑收货地址"
			})
			loadData()
		} else {
			uni.setNavigationBarTitle({
				title: "新建收货地址"
			})
		}
	})

	const handleSave = async () => {
		if (!formRef.value) return
		try {
			await formRef.value.validate().then(() => {
				const [province, city, district] = formData.value.city.split("-")

				if (state.id) {
					uni.request({
						url: SERVER_URL + '/customer/shipping-address',
						method: "PUT",
						data: {
							id: state.id,
							recipient: formData.value.recipient,
							phone: formData.value.phone,
							province,
							city,
							district,
							details_address: formData.value.details_address,
						},
						header: {
							"content-type": "application/json",
							"authorization": userStore.token
						},
						success: (res) => {
							if (res.statusCode === 200) {
								uni.showToast({
									title: "保存成功",
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 800)
							} else {
								uni.showToast({
									title: "保存失败",
									icon: "error"
								})
							}

						}
					});
				} else {
					uni.request({
						url: SERVER_URL + '/customer/shipping-address',
						method: "POST",
						data: {
							recipient: formData.value.recipient,
							phone: formData.value.phone,
							province,
							city,
							district,
							details_address: formData.value.details_address,
						},
						header: {
							"content-type": "application/json",
							"authorization": userStore.token
						},
						success: (res) => {
							if (res.statusCode === 200) {
								uni.showToast({
									title: "保存成功",
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 800)
							} else {
								uni.showToast({
									title: "保存失败",
									icon: "error"
								})
							}
						}
					});
				}
			})
		} catch (e) {
			console.log(e)
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 24px;
	}
</style>